<template>
  <div id="commentList">
    <div style="float:left;padding-top:15px;width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
      <el-input size="small" style="width: 300px"
                placeholder="输入关键字进行过滤"
                v-model="filterText" >
      </el-input>
      <div style="padding-top:10px; height:540px;">
        <el-tree  :data="menu" :props="defaultProps"
                  :filter-node-method="filterNode"
                  ref="tree"
                  @check-change="handleCheckChange"
                  style="font-size:16px;">
       <span class="custom-tree-node" slot-scope="{ node }">
        <span>{{ node.label }}</span>

      </span>
        </el-tree>
      </div>
    </div>
   <div style="float:right;width:970px;">
     <el-table
         height="536"
         :data="commentList"
         v-loading="loading"
         element-loading-text="拼命加载中"
         style="width: 99.5%">
       <el-table-column
           label="序号"
           align="center"
           type="index"
           :index="indexMethod">
       </el-table-column>
       <el-table-column
           label="评论用户"
           align="center"
           prop="userName"
       >
       </el-table-column>
       <el-table-column
           label="评论文章"
           prop="articleTitle"
           align="center"
           show-overflow-tooltip>
       </el-table-column>
       <el-table-column
           label="评论内容"
           align="center"
           prop="commentContent"
           show-overflow-tooltip
       >
       </el-table-column>
       <el-table-column
           label="评论时间"
           prop="createTime"
           align="center">
       </el-table-column>
       <el-table-column align="center" width="200">
         <template slot="header" slot-scope="scope" >
           <el-input size="small" @keyup.enter.native="searchHandle(scope.row)"  v-model="keywords"
                     placeholder="搜索评论或文章标题"></el-input>
         </template>
         <template slot-scope="scope">
           <el-button @click="deleteHandle(scope.row.commentId)" size="mini" icon="el-icon-delete" type="danger"></el-button>
         </template>
       </el-table-column>
     </el-table>
     <el-pagination
         background
         layout="total,prev, pager, next"
         :total="total"
         align="center"
         @current-change="handleCurrentChange"
         :current-page="currentPage"
         :page-size="pageSize"
         :hide-on-single-page="value"
         style="padding-top: 15px"
     >
     </el-pagination>
   </div>
  </div>
</template>

<script>
import {delComment,nestComments, commentList,} from "../../network/admin";

export default {
  name: "CommentList",
  data() {
    return {
      commentList: [],
      loading:true,
      keywords: '',
      value: false,
      currentPage: 1,
      total: 1,
      pageSize: 9,
      menu: [],
      defaultProps: {
        children: 'childCommentList',
        label:'commentContent',
      },
      filterText: '',
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.handleCurrentChange(this.currentPage);
    this.commentMenu();
  },
  methods: {
    handleCurrentChange(currentPage) {
      commentList(this.keywords, currentPage, this.pageSize).then(res => {
        this.loading=false;
        this.total = res.data.data.total;
        this.commentList = res.data.data.list;
        this.currentPage = currentPage;
      })
    },
    commentMenu() {
      nestComments(this.keywords).then(res => {
        this.loading=false;
        this.menu = res.data.data;
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.commentContent.indexOf(value) !== -1;
    },
    searchHandle() {
      this.currentPage = 1;
      this.commentMenu();
      this.handleCurrentChange(this.currentPage)
    },
    deleteHandle(commentId) {
      this.$confirm('你确定要删除该评论吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delComment(commentId).then(res => {
          this.$message.success('评论'+res.data.data);
          this.handleCurrentChange(this.currentPage)
        }).catch()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    indexMethod(index) {
      return (this.currentPage - 1) * this.pageSize + 1 + index;
    },
    handleCheckChange(data){
      console.log(data);
    }
  }
}
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  padding-right: 8px;

}
.el-tree-node__content{
  height:32px;
  line-height:32px;
}
.el-table__body-wrapper{
  min-height:477px;
}
</style>>